<template>
  <div class="h-screen bg-gradient-to-b from-blue-50 to-white flex flex-col overflow-hidden">
    <!-- 头部标题区域 -->
    <div class="text-center pt-4 sm:pt-6 md:pt-8 pb-2 sm:pb-3 md:pb-4 flex-shrink-0">
      <h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-blue-600 mb-2 sm:mb-4">
        个人信息
      </h1>
      <p class="text-sm sm:text-base md:text-lg lg:text-xl text-gray-600 px-4">
        查看和编辑您的个人信息
      </p>
    </div>

    <!-- 个人信息表单区域 -->
    <div class="flex items-center justify-center px-4 sm:px-6 py-2 sm:py-3 md:py-4 flex-1">
      <Loading v-model:show="isLoading" description="加载中...">
        <div class="max-w-4xl w-full">
          <div class="bg-white rounded-lg shadow-lg p-6 sm:p-8">
            <form @submit.prevent="updateUserInfo">
              <div class="mb-6 flex space-x-4">
                <!-- 姓名字段（只读） -->
                <div class="flex-1">
                  <label class="block text-sm font-medium text-gray-700 mb-2">
                    姓名
                  </label>
                  <input type="text" v-model="userInfo.name" readonly
                    class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-500 cursor-not-allowed focus:outline-none"
                    placeholder="暂无姓名信息" />
                </div>

                <!-- 新增性别字段 -->
                <div class="flex-1">
                  <label class="block text-sm font-medium text-gray-700 mb-2">
                    性别
                  </label>
                  <select name="gender" id="" v-model="userInfo.gender" :disabled="isLoading"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200">
                    <option value="">请选择</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                  </select>
                </div>
              </div>

              <div class="mb-6 flex space-x-4">
                <!-- 用户名字段（只读） -->
                <div class="flex-1">
                  <label class="block text-sm font-medium text-gray-700 mb-2">
                    用户名
                  </label>
                  <input type="text" v-model="userInfo.account" readonly
                    class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-500 cursor-not-allowed focus:outline-none"
                    placeholder="暂无用户名信息" />
                </div>

                <!-- 新增身份字段 -->
                <div class="flex-1">
                  <label class="block text-sm font-medium text-gray-700 mb-2">
                    身份
                  </label>
                  <select name="identity" id="" v-model="userInfo.identity" :disabled="isLoading"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200">
                    <option value="">请选择</option>
                    <option value="医生">医生</option>
                    <option value="患者">患者</option>
                    <option value="研究人员">研究人员</option>
                  </select>
                </div>
              </div>

              <div class="mb-6 flex space-x-4">
                <!-- 邮箱字段（可编辑） -->
                <div class="flex-1">
                  <label class="block text-sm font-medium text-gray-700 mb-2">
                    邮箱
                  </label>
                  <input type="email" v-model="userInfo.email" :disabled="isLoading"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
                    placeholder="请输入邮箱地址" />
                </div>

                <!-- 手机号字段（可编辑） -->
                <div class="flex-1">
                  <label class="block text-sm font-medium text-gray-700 mb-2">
                    手机号
                  </label>
                  <input type="tel" v-model="userInfo.phone" :disabled="isLoading"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
                    placeholder="请输入手机号码" />
                </div>
              </div>

              <!-- 操作按钮 -->
              <div class="flex justify-center">
                <button type="submit" :disabled="isLoading"
                  class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center">
                  <span v-if="isLoading" class="mr-2">
                    <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                      <path class="opacity-75" fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                      </path>
                    </svg>
                  </span>
                  {{ isLoading ? '保存中...' : '保存修改' }}
                </button>
              </div>
            </form>
          </div>
        </div>
      </Loading>
    </div>
  </div>
  <!-- 关键功能：页面级 Snackbar 组件实例 -->
  <Snackbar v-model:show="snackShow" :type="snackType" position="top" :duration="2000" :content="snackContent" />
</template>

<script>
import userApi from '@/api/user'
import Snackbar from '@/components/snackbar.vue'
import Loading from '@/components/loading.vue'

export default {
  name: 'InformationPage',
  components: { Snackbar, Loading },
  data() {
    return {
      // 用户信息数据
      userInfo: {
        name: '',
        account: '',
        email: '',
        phone: '',
        gender: '',//新增性别字段
        identity: ''//新增身份字段
      },
      // 加载状态
      isLoading: false,
      // 关键功能：统一页面级提示的显示状态与内容
      snackShow: false,
      snackType: 'success',
      snackContent: ''
    }
  },
  mounted() {
    // 页面加载时获取用户信息
    this.getUserInfo()
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      try {
        this.isLoading = true
        const response = await userApi.getMyInfo()
        if (response && response.code === 200 && response.data) {
          // 关键功能：读取成功响应直接使用 resp.code/resp.data
          this.userInfo = {
            name: response.data.name || '',
            account: response.data.account || '',
            email: response.data.email || '',
            phone: response.data.phone || '',
            gender: response.data.gender || '',
            identity: response.data.identity || ''
          }
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
        // 关键功能：显示错误提示
        this.snackType = 'error'
        this.snackContent = '获取用户信息失败，请稍后重试'
        this.snackShow = true
      } finally {
        this.isLoading = false
      }
    },

    // 更新用户信息
    async updateUserInfo() {
      try {
        // 验证邮箱格式
        if (this.userInfo.email && !this.isValidEmail(this.userInfo.email)) {
          // 关键功能：显示错误提示
          this.snackType = 'error'
          this.snackContent = '请输入有效的邮箱地址'
          this.snackShow = true
          return
        }

        // 验证手机号格式
        if (this.userInfo.phone && !this.isValidPhone(this.userInfo.phone)) {
          // 关键功能：显示错误提示
          this.snackType = 'error'
          this.snackContent = '请输入有效的手机号码'
          this.snackShow = true
          return
        }

        this.isLoading = true

        // 只提交可编辑的字段
        const updateData = {
          email: this.userInfo.email,
          phone: this.userInfo.phone,
          gender: this.userInfo.gender,//新增性别字段
          identity: this.userInfo.identity//新增身份字段
        }

        await userApi.updateUserInfo(updateData)


        // 关键功能：显示成功提示
        this.snackType = 'success'
        this.snackContent = '个人信息更新成功'
        this.snackShow = true
      } catch (error) {
        console.error('更新用户信息失败:', error)
        // 关键功能：显示错误提示
        this.snackType = 'error'
        this.snackContent = '更新失败，请稍后重试'
        this.snackShow = true
      } finally {
        this.isLoading = false
      }
    },


    // 验证邮箱格式
    isValidEmail(email) {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      return emailRegex.test(email)
    },

    // 验证手机号格式（中国大陆手机号）
    isValidPhone(phone) {
      // 关键功能：对齐后端规则 ^1\d{10}$
      const phoneRegex = /^1\d{10}$/
      return phoneRegex.test(phone)
    }
  }
}
</script>

<style scoped>
/* 使用 Tailwind CSS，无需额外样式 */
</style>
